<!DOCTYPE html>
<html>
<head>
    <title>药品查询</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../../Css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="../../Css/bootstrap-responsive.css"/>
    <link rel="stylesheet" type="text/css" href="../../Css/style.css"/>
    <script type="text/javascript" src="../../Js/jquery.js"></script>
    <script type="text/javascript" src="../../Js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../Js/bootstrap.file-input.js"></script>
    <script type="text/javascript" src="../../Js/ckform.js"></script>
    <script type="text/javascript" src="../../Js/common.js"></script>

    <style type="text/css">
        body {
            padding-bottom: 40px;
        }

        @media (max-width: 980px) {
            /* Enable use of floated navbar text */
            .navbar-text.pull-right {
                float: none;
                padding-left: 5px;
                padding-right: 5px;
            }
        }
    </style>
</head>
<body>

<form action="index.html" method="post" class="definewidth m20">
    <table class="table table-bordered table-hover definewidth m10">
        <tr>
            <td width="10%" class="tableleft">药品名称：</td>
            <td><input type="text" name="drName" value=""/></td>

            <td width="10%" class="tableleft">药品类型：</td>
            <td>
                <select name="drType">
                    <option value="0">选择类型</option>
                    <option value="1">中药</option>
                    <option value="2">西药</option>
                    <option value="3">处方</option>
                </select>
            </td>
        </tr>
        <tr>


            <td colspan="4">
                <center>
                    <button type="button" class="btn btn-primary" id="query">查询</button>
                    <button type="reset" class="btn btn-primary">清空</button>
                </center>
            </td>
        </tr>
    </table>
</form>

<table class="table table-bordered table-hover definewidth m10">
    <thead>
        <tr>
            <th><input type="checkbox" id="checkall" onChange="checkall();"></th>
            <th>药品编号</th>
            <th>药品名称</th>
            <th>药品类型</th>
            <th>简单描述</th>
            <th>剩余量</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody id="tboby">
        <!--<tr>-->
        <!--    <td style="vertical-align:middle;"><input type="checkbox" name="check" value="1"></td>-->
        <!--    <td style="vertical-align:middle;">J1121</td>-->
        <!--    <td style="vertical-align:middle;">感冒药</td>-->
        <!--    <td style="vertical-align:middle;">处方</td>-->
        <!--    <td style="vertical-align:middle;">用于普通感冒</td>-->
        <!--    <td style="vertical-align:middle;">1000袋</td>-->
        <!--    <td style="vertical-align:middle;">-->
        <!--        <a href="add.html">更改</a>&nbsp;&nbsp;&nbsp;-->
        <!--        <a href="add_medicine.html">添加库存</a>&nbsp;&nbsp;&nbsp;-->
        <!--        <a href="look.html">详情>>></a>-->
        <!--    </td>-->
        <!--</tr>-->
    </tbody>

<!--    pageSize上限15-->

</table>

<table class="table table-bordered table-hover definewidth m10">
    <tr >
        <th width="220px">

            <div>
                <button type="button" class="btn btn-success" id="newNav">添加新药</button>
                <button type="button" class="btn btn-success" id="newExcel">全部导出Excel</button>
            </div>

        </th>

        <th style="text-align: right;">
            <nav aria-label="Page navigation" style="display: inline-block; padding-right: 30px;">
                <label style="font-size: 14px; margin-bottom:0; vertical-align: 10px">
                    总&nbsp;<span id="total"></span>&nbsp;条数&nbsp;&nbsp;
                </label>
                <ul class="pagination" style="margin: 0;" id="page">

                </ul>
            </nav>
        </th>

    </tr>
</table>

</body>
<script type="text/javascript">

    String.prototype.GetValue= function(para) {
        let reg = new RegExp("(^|&)"+ para +"=([^&]*)(&|$)");
        let r = this.substr(this.indexOf("\?")+1).match(reg);
        if (r!=null) return unescape(r[2]); return null;
    }

    let url = document.location.toString();
    let pageNum = url.GetValue("pageNum");
    let drName = unescape(url.GetValue("drName"));
    let drType = url.GetValue("drType");

    $(function () {

        loadPage();

        //新增
        $('#newNav').click(function () {
            //以防 首次获取不到数据的情况
            pageNum = $("li[class='active']").find("a").html();
            window.location.href = "add.html?pageNum="+pageNum;
        });

        //生成Excel
        $("#newExcel").click(function (){
            if(confirm("是否全部导出Excel？")){
                window.open("/drug/excel");
            }
        });

        //查询加载
        $('#query').click(function (){
            drName = $("input[name='drName']").val();
            drType = $("select[name='drType']").val();
            loadPage();
        });
    });

    //列表全选
    function checkall() {
        var alls = document.getElementsByName("check");
        var ch = document.getElementById("checkall");
        if (ch.checked) {
            for (var i = 0; i < alls.length; i++) {
                alls[i].checked = true;
            }
        } else {
            for (var i = 0; i < alls.length; i++) {
                alls[i].checked = false;
            }
        }
    }

    /** 全选控制
     *  解决全选可能出现的情况：
     *      if1：一个未选，则取消全选
     *      if2：全部选中，则选中全选
     */
    function subselectAll() {
        var all = $("#checkall");
        var childs = $("input[name='check']");
        for (var i = 0; i < childs.length; i++) {
            if ($(childs[i]).prop("checked") == false) {
                all.prop("checked",false);
                return false;
            }
        }
        all.prop("checked", true);
        return true;
    }

    //全部删除
    function delAll() {
        var alls = document.getElementsByName("check");
        var ids = new Array();
        for (var i = 0; i < alls.length; i++) {
            if (alls[i].checked) {
                ids.push(alls[i].value);
            }
        }
        if (ids.length > 0) {
            if (confirm("确认操作?")) {
                alert("成功!");
            }
        } else {
            alert("请选中要操作的项");
        }
    }

    function loadPage() {

        $.ajax({
            type: "GET",
            url: "/drug/list",
            data: {
                drName:drName,
                drType:drType,
                pageNum:pageNum
            },
            dataType:"json",
            success: function(vo){
                let list=vo.pageInfo.list;
                let pageNum =vo.pageInfo.pageNum;
                let str="";
                for(let i=0;i<list.length;i++){
                    let obj=list[i];
                    let drId = obj.drId;
                    let drName = obj.drName;
                    let drSimdesc = obj.drSimdesc;
                    let drNumber = obj.drNumber==null?"无货":obj.drNumber;
                    let drType = obj.drType;
                    switch (drType){
                        case "1":drType = "中药"; break;
                        case "2":drType = "西药"; break;
                        case "3":drType = "处方"; break;
                        default:
                            drType = "未分类";break;
                    }
                    let btnStr = "<a href='add.html?drId="+drId+"&pageNum="+pageNum+"'>更改</a>&nbsp;&nbsp;&nbsp;\n" +
                                 "<a href='add_medicine.html?drId="+drId+"&pageNum="+pageNum+"'>添加库存</a>&nbsp;&nbsp;&nbsp;\n" +
                                 "<a href='look.html?drId="+drId+"&pageNum="+pageNum+"'>详情>>></a>\n" ;
                    str += "<tr>" +
                        "        <td style=\"vertical-align:middle;\"><input type=\"checkbox\" name=\"check\" onclick='subselectAll()'></td>\n" +
                        "        <td style=\"vertical-align:middle;\">"+drId+"</td>" +
                        "        <td style=\"vertical-align:middle;\">"+drName+"</td>" +
                        "        <td style=\"vertical-align:middle;\">"+drType+"</td>" +
                        "        <td style=\"vertical-align:middle;\">"+drSimdesc+"</td>" +
                        "        <td style=\"vertical-align:middle;\">"+drNumber+"</td>" +
                        "        <td style=\"vertical-align:middle;\">"+btnStr+"</td>" +
                        "    </tr>";
                }
                $("#tboby").html(str);
                //填充分页数据
                fillPageData(vo.pageInfo);
            }
        });

    }

    //<li>
    //     <a href="#" aria-label="Previous" id="prePage">
    //         <span aria-hidden="true">&laquo;</span>
    //     </a>
    // </li>
    // <!--<li><a href="#">1</a></li>-->
    // <!--<li><a href="#">2</a></li>-->
    // <!--<li><a href="#">3</a></li>-->
    // <!--<li><a href="#">4</a></li>-->
    // <!--<li><a href="#">5</a></li>-->
    // <li>
    // <a href="#" aria-label="Next">
    //     <span aria-hidden="true" id="nextPage">&raquo;</span>
    // </a>
    // </li>

    function fillPageData(pageInfo){
        //列表响应
        $("#total").html(pageInfo.total);

        let pageLiList = "";
        for (let i = 1 ; i <= pageInfo.navigateLastPage ; i++) {
            // 当前页高亮
            if (pageInfo.pageNum === i) {
                pageLiList += "<li class='active'><a href='javascript:void(0)' name='"+i+"' >"+i+"</a></li>";
            }else{
                pageLiList += "<li><a href='javascript:pageUrl("+i+")' name='"+i+"' >"+i+"</a></li>";
            }
        }

        let pageLiPre =
            "<li>\n" +
            "    <a href='javascript:pageUrl("+pageInfo.prePage+")' aria-label=\"Previous\" name='"+pageInfo.prePage+"' id='prePage' >\n" +
            "        <span aria-hidden=\"true\">&laquo;</span>\n" +
            "    </a>\n" +
            "</li>";
        let pageLiNext =
            "<li>\n" +
            "<a href='javascript:pageUrl("+pageInfo.nextPage+")' aria-label=\"Next\" name='"+pageInfo.nextPage+"' id='nextPage'>\n" +
            "    <span aria-hidden=\"true\">&raquo;</span>\n" +
            "</a>\n" +
            "</li>";

        $("#page").html(pageLiPre + pageLiList + pageLiNext);

        //约束 按钮 以防越界 (休眠1s 以防出错)
        setTimeout(constraintBtn(pageInfo), 1000);
    }

    function pageUrl(pageNum){
        //page 事件 跳转
        window.location.href = "index.html?pageNum="+pageNum+"&drName="+escape(drName)+"&drType="+drType;
    }


    function constraintBtn(pageInfo){
        // 分页列表翻页约束

        //如果是第一页：上一页和首页禁用
        if (pageInfo.isFirstPage){
            let firstNode = $("#page>li:first");
            firstNode.addClass("disabled");
            firstNode.find("a").attr("href","javascript:void(0)");
            firstNode.next().find("a").attr("href","javascript:void(0)");
        }
        //如果已经是最后一页：下一页和末页禁用
        if(pageInfo.isLastPage) {
            let lastNode = $("#page>li:last");
            lastNode.addClass("disabled");
            lastNode.find("a").attr("href","javascript:void(0)");
        }
    }

</script>
</html>
